<template>
    <BasicDrawer v-bind="$attrs">
        <a-layout-header>
            <a-input-search placeholder="输入产品名称搜索" v-model="searchText" @search="handleSearch" />
        </a-layout-header>
        <!-- 中部产品分类和明细 -->
        <a-layout-content>
            <a-row>
                <a-col :span="8">
                    <!-- 左侧产品大类 -->
                    <a-list class="product-category-list" :data-source="productCategories">
                        <template #renderItem="{ item }">
                            <a-list-item>{{ item.name }} ({{ item.count }})</a-list-item>
                        </template>
                    </a-list>
                </a-col>
                <a-col :span="16">
                    <!-- 右侧产品小类和明细 -->
                    <a-row>
                        <a-col :span="24">
                            <!-- 产品小类 -->
                            <a-tabs v-model:activeKey="activeSubCategoryId">
                                <a-tab-pane v-for="subCategory in subCategories" :key="subCategory.id"
                                    :tab="`${subCategory.name} (${subCategory.count})`">
                                    <!-- 产品明细 -->
                                    <a-list class="product-list" :data-source="filteredProducts">
                                        <template #renderItem="{ item }">
                                            <a-list-item>
                                                <a-list-item-meta :description="item.description">
                                                    <template #avatar>
                                                        <a-avatar :src="item.image" />
                                                    </template>
                                                    <template #title>
                                                        <span>{{ item.name }}</span>
                                                    </template>
                                                </a-list-item-meta>
                                                <div>
                                                    价格：{{ item.price }}<br />
                                                    数量：
                                                    <a-input-number v-model="item.quantity" :min="1"
                                                        @change="updateTotals" />
                                                </div>
                                            </a-list-item>
                                        </template>
                                    </a-list>
                                </a-tab-pane>
                            </a-tabs>
                        </a-col>
                    </a-row>
                </a-col>
            </a-row>
        </a-layout-content>
    </BasicDrawer>
</template>

<script setup>
import { ref, computed } from 'vue';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';

const searchText = ref('');
const activeSubCategoryId = ref(1);

const productCategories = ref([
    { id: 1, name: '类别1', count: 10 },
    { id: 2, name: '类别2', count: 20 },
]);

const subCategories = ref([
    { id: 1, name: '小类1', count: 5 },
    { id: 2, name: '小类2', count: 15 },
]);

const products = ref([
    { id: 1, name: '产品1', description: '描述1', price: 100, quantity: 1, image: 'url_to_image', subCategoryId: 1 },
    // ...更多产品
]);

const filteredProducts = computed(() => {
    return products.value.filter(product => product.name.toLowerCase().includes(searchText.value.toLowerCase()));
});

const totalQuantity = computed(() => {
    return filteredProducts.value.reduce((total, product) => total + product.quantity, 0);
});

const totalAmount = computed(() => {
    return filteredProducts.value.reduce((total, product) => total + product.price * product.quantity, 0);
});

function handleSearch(value) {
    // 实际应用中，这里可以触发搜索请求
}

function updateTotals() {
    // 更新汇总信息
    // 这里是响应式的，数量变化时会自动更新
}
</script>

<style scoped>
.product-category-list {
    /* 样式定制 */
}

.product-list {
    /* 样式定制 */
}
</style>
